<template>
	<view sc-list-context>
		<view class="zjc-rb">
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item.url" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="sc-main-content">
			<view class="sc-list-header">
				<view class="sc-title" style="margin-top: 0rpx; margin-left: 30rpx;" >
					<view style="font-size: 40rpx;">景区列表</view>
					<view style="font-size: 17rpx;">List of Scenic Spots</view>
				</view>
				
				<view class="sc-header-image">
					<image src="../../static/icon/sc-list-icon.png" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
			</view>
			<view class="sc-main-item" v-for="item in scenery_lists" :key="item.scId" @click="toTicket(item.scId)">
				<view class="sc-main-item-image">
					<image :src="item.scImage" mode="" style="width: 300rpx; height: 200rpx;"></image>
				</view>
				<view class="sc-main-item-desc">
					<view class="title" style="font-size: 35rpx; color: black;">
						{{item.scName}}
					</view>
					<view class="desc" style="color: #f88a3f;">
						{{item.scDesc}}
					</view>
					<view class="pri">
						<text v-if="item.scPrice>0">门票 <text style="font-size: 30rpx; color: red;">¥{{item.scPrice}}</text>起</text>
						<text v-else>免费</text>
					</view>
					<view class="sc-time">
						<text>{{item.scTime}}</text>
					</view>
				</view>
			</view>
			<view style="width: 100%; height: 150rpx; max-width: 100%;">
				<view style=" margin-top: 140rpx; margin-left: 250rpx; position: absolute; bottom:30rpx;">
					<text style="font-size: 26rpx;">我也是有底线的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scenery_lists:[
					{
						scId:1,
						scName:'青山湖景区',
						scDesc:'青翠的山峦，湖水清澈透明',
						scTime:"8:00-17:00",
						scImage:'',
						scPrice:100
					},
					{
						scId:2,
						scName:'碧水瀑布',
						scDesc:'水花如碧玉般闪闪发光',
						scTime:"8:00-17:00",
						scImage:'',
						scPrice:100
					},
					{
						scId:3,
						scName:'花海小径',
						scDesc:'花儿盛开，美不胜收',
						scTime:"8:00-17:00",
						scImage:'',
						scPrice:100
					},
					{
						scId:4,
						scName:'山顶观景台',
						scDesc:'感叹大自然的鬼斧神工',
						scTime:"8:00-17:00",
						scImage:'',
						scPrice:100
					},
				],
				current:1,
				info: [{
						content: '内容 A',
						url:"../../static/sc1.jpg"
					}, 
					{
					    content: '内容 B',
						url:'../../static/sc-2.jpg'
					}, 
					{
					    content: '内容 C',
						url:'../../static/sc3.png'
					}],
			}
		},
		
		onLoad() {
				this.init()
		},
		methods: {
			change(e){
				this.current = e.detail.current
			},
			toTicket(scId){
				uni.navigateTo({
					url:"/pages/ticket/ticket?scid="+scId
				})
			},
			init(){
				this.request({
					url:"/scenery/list",
					method:"GET"
				}).then(res=>{
					if(res.code==='1'){
						this.scenery_lists = res.data;
						console.log(this.scenery_lists)
					}
					
				}).catch(()=>{
					
					uni.showToast({
						icon:'error',
						title:'服务异常'
					})
				})
			}
			
		}
	}
</script>

<style scoped>
.sc-main-content {
	background-color: #ffffff;
	position: absolute;
	top:450rpx;
	width: 100%;
	border-radius:20rpx;
	z-index: 2;
}
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.sc-list-header{
	margin-left: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sc-main-item{
	display: flex;
	width: 90%;
	height: 220rpx;
	border-radius: 20rpx;
	background-color: #fafafa;
	margin: 0 auto;
	margin-top: 20rpx;
}
.sc-main-item-image{
	
	margin-left: 10rpx;
	border-radius: 20rpx;
}
.sc-main-item-image image{
	border-radius: 20rpx;
}
.sc-main-item-desc {
	margin-left: 24rpx;
}
.sc-main-item-desc view {
	font-size: 25rpx;
	margin-top: 10rpx;
	color: gray;
}
.desc {
	background-color: #ffedcd;
	border-radius: 10rpx;
	text-align: center;
}

</style>
